.lc-login:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./bg.png");
  background-position: center;
  background-size: cover;
  z-index: -1;
  filter: blur(6px);
}

.lc-login {
  color: #c7c7c7;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000ba;

  .lc-login-container {
    width: 700px;
    display: flex;
    box-shadow: 0 0 20px #232323;

    .lc-login-left {
      flex-grow: 1;
      background-image: url("./bg.png");
      background-size: cover;
      opacity: 0.7;
      border-bottom-left-radius: 5px;
      border-top-left-radius: 5px;
    }

    .lc-login-right {
      padding: 15px;
      width: 50%;
      background-color: rgba(36, 36, 36, 0.96);
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;

      .login-header {
        padding: 20px 0 5px 0;
        text-align: center;

        .header-title {
          margin-bottom: 5px;
          font-size: 20px;
          font-weight: 400;
          color: #b5b5b5;
        }

        .header-des {
          margin: 0;
          color: #a3a3a3;
        }
      }

      .login-body {
        padding: 20px;

        .login-item {
          height: 50px;
        }

        .remember-me {
          .lc-checkbox {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;

            .ui-container-content {
              flex-grow: unset;
            }
          }
        }

        .lc-button {
          width: 100%;
        }
      }
    }
  }
}